<template>
<div>
  <el-button type="primary" @click="save" style="float: left;" v-if="saveBtn">新增</el-button>&nbsp;&nbsp;
  <el-button type="primary" @click="deleteMany" style="float: left;" v-if="dropBtn">批量删除</el-button>&nbsp;&nbsp;
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
  >
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="name"
        label="商品类型"
        width="150">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.row)"  v-if="updateBtn">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)" v-if="deleteBtn">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="viewNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
  </el-pagination>
  <!--  新增弹窗-->
  <el-dialog title="编辑商品类型" :visible.sync="dialogFormVisible"  @close="clearForm">
    <el-form :model="form"  ref="formref" >
      <el-form-item label="商品类型名称：" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="diaSave">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "goodsType",
  data() {
    return {
      name: '',
      curPage:1,
      viewNum:5,
      totalNum:0,
      dialogFormVisible:false,
      formLabelWidth: '120px',
      tableData:[],
      form:{
        id:'',
        name:''
      },
      saveBtn:true,
      deleteBtn:true,
      dropBtn:true,
      updateBtn:true,
    }
  },
  methods:{
    async query(){
      let resp=await this.$axios.get('/goodsType/queryByPage',{
        params:{
          curPage:this.curPage,
          pageSize:this.viewNum,
          name:this.name
        }
      })
      this.tableData = resp.data.data
      this.totalNum=resp.data.total
    },
    handleSizeChange(val) {
      this.viewNum=val
      this.query()
    },
    //切换当前页
    handleCurrentChange(val) {
      this.curPage=val
      this.query()
    },
    clearForm(){
      this.form.id=''
      this.form.name=''
      this.$refs.formref.resetFields()
    },
    save(){
      this.dialogFormVisible=true
    },
    handleEdit(row){
      this.form.id=row.id
      this.form.name=row.name
      this.dialogFormVisible=true
    },
    diaSave(){
      let url
      if(this.form.id===''){
        url='/goodsType/save'
      }else {
        url='/goodsType/update'
      }
      this.$refs.formref.validate( async (valid) => {
        if (valid) {
          let resp = await this.$axios.get(url,{
            params:this.form
          })
          if(resp.data.code===200){
            this.query()
            this.dialogFormVisible=false
          }else{
            alert('编辑失败')
            this.dialogFormVisible=false
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let resp=await this.$axios.get('/goodsType/dropBatch?ids='+row.id)
        if(resp.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.query()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async deleteMany() {
        let selected = this.$refs.multipleTable.selection;
        if(selected.length===0){
          this.$message({
            message: '你还没有选择要删除的类型',
            type: 'warning'
          });
          return
        }
        let ids='?'
        for (let i = 0; i < selected.length; i++) {
          ids+='ids='+selected[i].id+'&'
        }
        ids=ids.substring(0,ids.length-1)
        let resp=await this.$axios.get('/goodsType/dropBatch'+ids)
        if(resp.data.code===200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.query()
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
    },
    getVis(){
      // let menu=JSON.parse(sessionStorage.getItem('menu'))
      // let bookMenu=menu.find(item=>{
      //   return item.menuName==='图书类型管理'
      // })
      // this.saveBtn=bookMenu.children.some(item=>{
      //   return item.menuAddress==='/bookType/save'
      // })
      // this.updateBtn=bookMenu.children.some(item=>{
      //   return item.menuAddress==='/bookType/update'
      // })
      // this.dropBtn=bookMenu.children.some(item=>{
      //   return item.menuAddress==='/bookType/dropBatch'
      // })
      // this.deleteBtn=bookMenu.children.some(item=>{
      //   return item.menuAddress==='/bookType/dropBatch'
      // })
    },
  },
  created() {
    this.getVis()
    this.query()
  }
}
</script>

<style scoped>

</style>